<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :title="title"
    width="350"
    @close="close"
  >
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <vab-card v-loading="listLoading" class="left-height">
          <vab-card
            v-for="(item, index) in list"
            :key="item.chat_id"
            class="vab-card"
            shadow="hover"
            @click="vabCardFun(item, index)"
          >
            <el-row align="middle">
              <el-image
                class="user-img"
                fit="fill"
                :lazy="true"
                :src="item.avatar"
              />
              <div>
                <div style="margin-bottom: 5px">
                  <div v-if="item.gender == 1" class="user-man">
                    <vab-icon
                      icon="man"
                      is-custom-svg
                      style="width: 14px; color: #fff"
                    />
                  </div>
                  <div v-else-if="item.gender == 2" class="user-woman">
                    <vab-icon
                      icon="woman"
                      is-custom-svg
                      style="width: 12px; color: #fff"
                    />
                  </div>
                  <div v-else style="font-size: 10px; color: #e6a23c">未知</div>
                </div>
                <div>{{ item.customer_name }}</div>
              </div>
            </el-row>
            <el-row justify="end">
              <div class="time">{{ item.add_time }}</div>
            </el-row>
            <div
              class="chat-status"
              :style="
                item.customer_type == 1 ? 'color:#67c23a' : 'color:#1890ff'
              "
            >
              {{ item.customer_type == 1 ? '微信' : '企业微信' }}
            </div>
          </vab-card>
          <el-row v-if="list.length == 0" justify="center">
            <el-empty description="暂无内容" image-size="100" />
          </el-row>
        </vab-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  import { customerList } from '@/api/enterpriseWeChat/customer'
  export default defineComponent({
    name: 'TableEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        treeRef: null,
        form: {
          corp_id: null,
          user_id: '',
        },
        list: [],
        listLoading: false,
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '请输入分类名称' },
          ],
        },
        title: '',
        clickIndex: 0,
        dialogFormVisible: false,
      })

      const showEdit = async (row) => {
        console.log(row)
        state.title = '好友列表'
        state.listLoading = true
        state.dialogFormVisible = true
        state.form.corp_id = row.corp_id
        state.form.user_id = row.user_id
        await fetchData()
      }
      const vabCardFun = (item, index) => {
        state.clickIndex = index
        console.log(item.click)
      }
      const fetchData = async () => {
        const { data } = await customerList(state.form)
        console.log(data)
        state.list = data
        state.listLoading = false
      }
      const loadMore = () => {
        fetchData()
      }
      const close = () => {
        // state['formRef'].resetFields()
        state.form = {}
        state.list = []
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { message } = await doEdit(state.form)
            $baseMessage(message, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        vabCardFun,
        loadMore,
        fetchData,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .load-more {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .left-height {
    height: 520px;
    overflow-y: auto;
    .time {
      color: #999;
      font-size: 12px;
    }
    .user-img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
      border: 1px solid #e2e2e2;
    }
    .user-man,
    .user-woman {
      width: 16px;
      height: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .user-man {
      border-radius: 3px;
      background-color: #1890ff;
    }
    .user-woman {
      border-radius: 3px;
      background-color: #f89898;
    }
  }
  .vab-card {
    position: relative;
    margin-bottom: 10px !important;
  }
  .chat-status {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 11px;
  }
</style>
